<template>
  <div style="margin-left: 15px; margin-top: 15px; height: 100%; display: flex;">
    <!-- 侧边栏容器 -->
    <div class="sidebar-container">
      <!-- 自定义添加分类按钮 -->
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleAddCategory"
        class="add-button"
      >
        添加分类
      </el-button>

      <!-- 分类标签页 -->
      <el-tabs
        v-model="currentCid"
        @tab-click="handleClick"
        type="card"
        editable
        @edit="editCategory"
        tab-position="left"
        class="category-sidebar"
      >
        <el-tab-pane
          v-for="(item, i) in categories"
          :label="item.name"
          :key="i + item.name"
          :name="item.id.toString()"
        ></el-tab-pane>
      </el-tabs>
    </div>

    <category-edit-form ref="editForm" @update="update"></category-edit-form>
  </div>
</template>

<script>
import CategoryEditForm from "./CategoryEditForm";
export default {
  name: "CategoryBar",
  components: { CategoryEditForm },
  data() {
    return {
      currentCid: "-1",
      categories: [],
      baseURL: this.$baseURL.category
    };
  },
  mounted() {
    this.update();
  },
  methods: {
    update() {
      var _this = this;
      var cid = this.$route.query.cid || undefined;
      this.axios.get(this.baseURL+'/list').then(function (response) {
        if (response.data.code === 0) {
          _this.categories = response.data.data;
          if (_this.categories.length > 0) {
            _this.currentCid = cid || _this.categories[0].id.toString();
            _this.$emit("categorySelect");
          }
        }
      });
    },

    edit() {
      this.$refs.editForm.dialogFormVisible = true;
      this.$refs.editForm.isCreate = false;
      for (var i = 0; i < this.categories.length; i++) {
        if (this.categories[i].id.toString() === this.currentCid) {
          this.$refs.editForm.form = this.categories[i];
        }
      }
    },

    // 自定义添加分类按钮的点击事件
    handleAddCategory() {
      this.$refs.editForm.dialogFormVisible = true;
      this.$refs.editForm.isCreate = true;
    },

    editCategory(targetName, action) {
      if (action === "remove") {
        var _this = this;
        this.$confirm("此操作将永久删除该笔记分类, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log()
            _this.axios.delete(this.baseURL+'/delete/'+this.currentCid)
              .then(function (response) {
              if (response.data.code === 0) {
                _this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                let tabs = _this.categories;
                let activeName = _this.currentCid;
                if (activeName === targetName) {
                  tabs.forEach((tab, index) => {
                    if (tab.id.toString() === targetName) {
                      let nextTab = tabs[index + 1] || tabs[index - 1];
                      if (nextTab) {
                        activeName = nextTab.id.toString();
                      }
                    }
                  });
                }
                _this.currentCid = activeName;
                _this.categories = tabs.filter((tab) => tab.id.toString() !== targetName);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },

    handleClick() {
      this.$emit("categorySelect");
    },
  },
};
</script>

<style>
.sidebar-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 200px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.add-button {
  width: 100%;
  border-radius: 0;
  margin-bottom: 10px;
}

/* 分类标签页 */
.category-sidebar {
  flex: 1;
  overflow-y: auto;
}

.el-tabs__new-tab {
  display: none !important;
}

.el-tabs__nav-prev,
.el-tabs__nav-next {
  line-height: 22px !important;
}

/* 全局侧边栏标签样式 */
.sidebar .el-tabs {
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

.sidebar .el-tabs__item {
  font-size: 18px;
  color: black;
  display: flex;
  align-items: center;
  max-width: 150px;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  margin: 5px;
  border-radius: 5px;
  background: lightskyblue;
}

.sidebar .el-tabs__item.is-active {
  color: whitesmoke;
}

.el-card__header {
   background: paleturquoise;
}

.el-card__body {
  border: 10px solid paleturquoise;
  padding: 10px;
}

</style>
